import React from 'react'
import { Link, Route } from 'react-router-dom'
import Detail from './Detail'

function Message(props) {
  const messageArr = [
    { id: '01', title: '消息1' },
    { id: '02', title: '消息2' },
    { id: '03', title: '消息3' }
  ]

  const replaceShow = (id, title) => {
    //replace跳转+携带params参数
    //props.history.replace(`/home/message/detail/${id}/${title}`)

    //replace跳转+携带search参数
    // props.history.replace(`/home/message/detail?id=${id}&title=${title}`)

    //replace跳转+携带state参数
    props.history.replace(`/home/message/detail`, { id, title })
  }

  const pushShow = (id, title) => {
    //push跳转+携带params参数
    // props.history.push(`/home/message/detail/${id}/${title}`)

    //push跳转+携带search参数
    // props.history.push(`/home/message/detail?id=${id}&title=${title}`)

    //push跳转+携带state参数
    props.history.push(`/home/message/detail`, { id, title })
  }

  return (
    <>
      <ul>
        {messageArr.map((v) => (
          <li key={v.id}>
            {/* <Link to={`/home/message/detail/${v.id}/${v.title}`}>{v.title}</Link> */}
            <Link to={{ pathname: '/home/message/detail', state: { id: v.id, title: v.title } }}>{v.title}</Link>
            
            &emsp;<button onClick={() => pushShow(v.id, v.title)}>push查看</button>
            &emsp;<button onClick={() => replaceShow(v.id, v.title)}>replace查看</button>
          </li>
        ))}
      </ul>
      <hr />
      {/* 声明接收params参数 */}
      {/* <Route path='/home/message/detail/:id/:title' component={Detail} /> */}

      {/* search参数无需声明接收，正常注册路由即可 */}
      {/* <Route path="/home/message/detail" component={Detail}/> */}

      {/* state参数无需声明接收，正常注册路由即可 */}
      <Route path='/home/message/detail' component={Detail} />
    </>
  )
}

export default Message
